define(function(require, exports, module) {

  // var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('lodash');
  // var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');

  var d3 = require('d3')
  require('js/graph/ringGradient')

  var util = require('hy5b/graph/index')

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);
    
    var ring = new d3.RingGradient({
      svg: "#svg",
      cx:150,
      cy:150,
      radius: 62,
      ringWidth:4,
      t: 0.4,
      dot: false,
      text: false,
      color: d3.scaleSequential(d3.interpolate(d3.rgb(243, 211, 100, 0), d3.rgb(243, 211, 100, 1)))
    })

    var rings = [{
      d: ring,
      end: 0.7,
      step: 0.7 / 180
    }]

    var count = rings.length
    var i = 0
    
    var timer = d3.interval(() => {
      rings.map(function(ring) {
        
        if(ring.d.t >= ring.end){
          i++
        } else {
          ring.d.update(ring.d.t+=ring.step)
        }
      })

      if (i >= count) {
        timer.stop()
      }
      
    }, 17)

    console.log(util.rgb2Hsl(243, 211, 100))
    const color = util.parse2Color('#786333')
    console.log(util.rgb2Hsl(color[0], color[1], color[2]))
    console.log(util.rgb2Hsl(246, 218, 119))
  }

  return main;
})
